<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mapbox-Example</title>
  <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
</head>

<body>
  <div id="map"></div>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2pzNHBtendwMDZ2ZDQzbnVmZXdtMDlvdiJ9.GSija86yNNR4ssBtFFpx0g';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/huanglii/cjqf8hb3qjrid2sogai1e09e0',
      center: [106.581355, 29.561788],
      zoom: 16,
      minZoom: 10,
      pitch: 60
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');

    map.on('load', function () {
      map.addSource('buildings', {
        'type': 'vector',
        'scheme': 'tms',
        'tiles': [
          'http://47.112.3.121/geoserver/gwc/service/tms/1.0.0/buildings:Chongqing@EPSG:900913@pbf/{z}/{x}/{y}.pbf',
        ]
      });

      map.addLayer({
        'id': '3d-buildings',
        'source': 'buildings',
        'source-layer': 'Chongqing',
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
          'fill-extrusion-color': {
            "property": "Floor",
            "stops": [
              [0, '#6BD089'],
              [20, '#DC6C6C']
            ]
          },
          'fill-extrusion-height': [
            "interpolate", ["linear"],
            ["zoom"],
            15, 0,
            15.5, ["*", ["get", "Floor"], 3.3]
          ],
          'fill-extrusion-base': 0,
          'fill-extrusion-opacity': .6
        }
      });
    });
  </script>
</body>

</html>